/* 顶部容器样式 */
.container {
  display: flex;               /* 使用 Flexbox 布局 */
  align-items: center;         /* 垂直居中对齐 */
  justify-content: flex-start; /* 水平左对齐 */
  padding: 20px;               /* 上下左右留出一些空间 */
  background-color: rgb(0, 70, 140);  /* 背景颜色 */
  flex-direction: column; /* 垂直排列元素 */
}

/* 顶部内容 */
.topContent {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

/* Logo 样式 */
.logo {
  width: 92px;                 /* 控制图片的宽度 */
  height: 92px;                /* 控制图片的高度 */
  margin-right: 17px;          /* 图片与文字之间的间距 */
}

/* 第二张图片 */
.logo2 {
  width: 300px;               /* 控制图片的宽度 */
  height: 70px;               /* 控制图片的高度 */
  margin-left: auto;          /* 将元素推到容器的右边 */
  margin-right: 15px;         /* 图片与文字之间的间距 */
}

/* 标题和副标题的容器 */
.textContainer {
  display: flex;               /* 使用 Flexbox 布局 */
  flex-direction: column;      /* 让标题和副标题垂直排列 */
  justify-content: center;     /* 垂直居中 */
}

/* 标题样式 */
.title {
  font-size: 27px;             /* 标题字体大小 */
  font-weight: bold;           /* 粗体 */
  color: rgb(254, 254, 254);   /* 白色 */
  text-align: left;            /* 水平左对齐 */
  margin-bottom: 5px;          /* 下边距 */
}

/* 子标题样式 */
.subtitle {
  font-size: 17px;             /* 子标题字体大小 */
  color: #d1d1d1;              /* 深灰色 */
  text-align: left;            /* 水平左对齐 */
  margin-bottom: 3px;           /* 上边距 */
  font-family: 'Arial', sans-serif;  /* 英文字体 */
}

/* 轮播图样式 */
.carousel {
  width: 50%; /* 轮播图片的宽度为父容器的一半 */
  height: 100px; /* 轮播图片的高度 */
  overflow: hidden;
  border-radius: 0px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  position: relative;
  margin-left: 15px;
  flex-grow: 1; /* 使轮播区域占据剩余空间 */
}

/* 轮播图片样式 */
.carouselImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 10s ease;
  animation-duration: 10s; /* 动画持续时间 */
}

/* 定义不同的切换动画 */
.fadeIn {
  animation: fadeIn 3s ease-out;
}

.zoomIn {
  animation: zoomIn 3s ease-out;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slideLeft {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

@keyframes slideRight {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

@keyframes zoomIn {
  0% { transform: scale(0.5); }
  100% { transform: scale(1); }
}
/* 当前时间显示的独立框 */
.timeBox {
  position: relative;
  bottom: 1px; /* 距离container底部20px */
  right: 0;
  padding: 8px 8px; /* 较小的内边距 */
  background: linear-gradient(45deg, #6eb9f7, #4a90e2); /* 渐变蓝色背景 */
  color: white; /* 字体颜色 */
  border-radius: 8px; /* 圆角效果 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 阴影效果 */
  font-family: 'Arial', sans-serif; /* 更现代的字体 */
  font-size: 14px; /* 调整时间字体的大小 */
  text-align: center; /* 居中对齐 */
  
  justify-content: center;
  align-items: center;
  width: 200px; /* 缩小时间框的宽度 */
  height: 30px;
}

/* 时间文本样式 */
.time {
  font-size: 14px; /* 更小的时间字体 */
  font-weight: bold; /* 加粗字体 */
}

/* 水滴效果 */
.timeBox .drop1,
.timeBox .drop2,
.timeBox .drop3 {
  content: '';
  position: absolute;
  left: 0;
  top: -30px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00BFFF; /* 水滴的颜色 */
  animation: drop 3s infinite; /* 动画效果 */
}

/* 不同水滴的偏移位置和延迟时间 */
.timeBox .drop1 {
  left: 0;
  animation-delay: 0s; /* 第一个水滴立即开始动画 */
}

.timeBox .drop2 {
  left: 15px;
  animation-delay: 0.5s; /* 第二个水滴稍微延迟 */
}

.timeBox .drop3 {
  left: 30px;
  animation-delay: 1s; /* 第三个水滴再延迟一些 */
}

/* 水滴下落的动画 */
@keyframes drop {
  0% {
    transform: translateY(0); /* 初始位置 */
    opacity: 1; /* 完全不透明 */
  }
  50% {
    transform: translateY(20px); /* 水滴下落 */
    opacity: 0.6; /* 变得稍微透明 */
  }
  100% {
    transform: translateY(40px); /* 水滴继续下落 */
    opacity: 0; /* 水滴完全透明 */
  }
}

/* 将水滴容器放在 container 下方 */
.container {
  position: relative; /* 为水滴和时间框提供参考 */
}

/* 在container下方添加水滴效果 */
.container::after {
  content: '';
  position: absolute;
  bottom: -20.5px; /*出现在container底部以下60px */
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to top, transparent, rgba(0, 191, 255, 0.5)); /* 模拟水滴下落的效果 */
}